<script setup>
import { ref } from 'vue'
import { rechargeBalanceForMemberService } from '@/api/member.js'

const showBalanceRechargePopup = ref(false)

const memberBalance = ref() // 会员余额
const rechargeAmount = ref() // 充值金额

// 向外暴露方法
const open = (row) => {
  showBalanceRechargePopup.value = true
  memberBalance.value = row.balance
  selectedAmount.value = null
  customAmount.value = null
  rechargeAmount.value = null
}

// 选择充值金额
const selectedAmount = ref()
const rechargeOptions = [
  { amount: 100, bonus: 10 },
  { amount: 500, bonus: 50 },
  { amount: 1000, bonus: 100 }
]
const selectAmount = (option) => {
  customAmount.value = null
  selectedAmount.value = option.amount
  rechargeAmount.value = selectedAmount.value + option.bonus
}

// 自定义充值金额
const customAmount = ref()
const handleCustomAmountInput = () => {
  selectedAmount.value = null
  rechargeAmount.value = parseInt(customAmount.value * 1.1)
}

// 充值
const emit = defineEmits(['success'])
const handleRecharge = async () => {
  if (!rechargeAmount.value) {
    showNotify({
      type: 'warning',
      message: '请选择或输入充值金额'
    })
    return
  }
  await rechargeBalanceForMemberService(rechargeAmount.value)
  showToast({
    message: '充值中...',
    forbidClick: true,
    type: 'loading',
    duration: 0
  })
  setTimeout(() => {
    closeToast()
    showNotify({
      type: 'success',
      message: '充值成功'
    })
    showBalanceRechargePopup.value = false
    emit('success')
  }, 1500) // 模拟充值，1.5秒后关闭提示
}

defineExpose({
  open
})
</script>

<template>
  <van-popup
    v-model:show="showBalanceRechargePopup"
    destroy-on-close
    round
    position="bottom"
    :style="{ height: '60%' }"
  >
    <div class="balance-recharge">
      <div class="title">余额充值</div>
      <div class="content">
        <!-- 账户余额 -->
        <div class="balance-card">
          <div class="label">账户余额</div>
          <div class="amount">¥{{ (memberBalance / 100).toFixed(2) }}</div>
        </div>

        <!-- 充值金额 -->
        <div class="recharge-section">
          <!-- 充值金额选项 -->
          <div class="section-title">充值金额</div>
          <div class="amount-options">
            <div
              v-for="option in rechargeOptions"
              :key="option.amount"
              :class="['amount-option', { active: selectedAmount === option.amount }]"
              @click="selectAmount(option)"
            >
              <div class="main-amount">{{ option.amount }}</div>
              <div class="bonus">送{{ option.bonus }}</div>
            </div>
          </div>
          <!-- 自定义充值金额 -->
          <div class="custom-amount">
            <van-field
              v-model="customAmount"
              type="digit"
              placeholder="自定义充值金额"
              @input="handleCustomAmountInput"
            >
              <template #prefix>¥</template>
            </van-field>
          </div>
        </div>
        <van-button type="primary" block round @click="handleRecharge">立即充值</van-button>
      </div>
    </div>
  </van-popup>
</template>

<style lang="scss" scoped>
.balance-recharge {
  background-color: #f7f8fa;

  .title {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 20px 0;
  }

  .content {
    padding: 16px;

    .balance-card {
      background: linear-gradient(135deg, #1989fa, #0570db);
      border-radius: 12px;
      padding: 20px;
      color: white;
      margin-bottom: 20px;

      .label {
        font-size: 14px;
        opacity: 0.9;
        margin-bottom: 8px;
      }

      .amount {
        font-size: 32px;
        font-weight: 600;
      }
    }

    .recharge-section {
      background: white;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;

      .section-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 16px;
        color: #323233;
      }

      .amount-options {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 16px;

        .amount-option {
          border: 1px solid #ebedf0;
          border-radius: 8px;
          padding: 12px;
          text-align: center;
          cursor: pointer;
          transition: all 0.3s;

          &.active {
            border-color: #1989fa;
            background-color: #e8f3ff;
          }

          .main-amount {
            font-size: 18px;
            font-weight: 500;
            color: #323233;
            margin-bottom: 4px;

            &::before {
              content: '¥';
              font-size: 14px;
            }
          }

          .bonus {
            font-size: 12px;
            color: #ff6b6b;
          }
        }
      }

      .custom-amount {
        margin-top: 20px;

        :deep(.van-field) {
          background-color: #f7f8fa;
          border-radius: 8px;
          padding: 8px 12px;
        }
      }
    }
  }
}
</style>
